<template >
  <div style="padding:20px">
            <a-list
              :grid="{ gutter: 16, column: 1 }"
            >
              <a-checkbox-group
                v-decorator="['checkbox-group']"
                style="width: 100%"
                name="radioGroup"
                v-for="(item, index) in this_facets"
                :key="index"
                :value="selectvalue"
              >
                <a-collapse :defaultActiveKey="activeKey">
                  <a-collapse-panel
                    :key="String(index)"
                    :header="item.label"
                    :style="customStyle"
                    class="sliderhead"
                  >
                    <a-form-item>
                      <div v-if="isShowFacetList">
                        <a-row v-for="(op, i) in item.facetList" :key="i">
                          <a-col :span="20">
                            <a-checkbox
                              :value="op.code"
                              :data-id="op.id"
                              :name="item.id"
                              :checked="checked"
                              @change="
                                ChangeFilter(
                                  item.label,
                                  item.id,
                                  op.id,
                                  op.name,
                                  op.code,
                                  'true'
                                )
                              "
                            >
                              &nbsp; &nbsp;
                              {{item.lable}}{{ op.name }}
                            </a-checkbox>
                          </a-col>
                          <a-col :span="4">
                            <a-badge
                              :count="op.count"
                              :overflow-count="999999999999"
                              :number-style="{ backgroundColor: '#52c41a' }"
                            />
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-item>
                    <!-- <a
            slot="extra"
            href="#"
          >^</a> -->
                  </a-collapse-panel>
                </a-collapse>
              </a-checkbox-group>
            </a-list>
          </div>
</template>

<script>
// import this.$store from "../components/this.$store";
// import VueSlider from "vue-slider-component";
// import "vue-slider-component/theme/default.css";
export default {
  props: {
    // state: Object,
    // f: Array,
  },
  data: () => ({
    //   slider
      activeKey: ["0", "1", "2", "3", "4"],
      checked: true,
      selectvalue: [],
      customStyle: {
        background: "#2780e3",
        color: "#fff",
      },
      headStyless: {
        disply: "none",
      },
      optionsWithDisabled: [
        { value: "Apple", label: "apple" },
        { label: "Pear", value: "Pear" },
        { label: "Orange", value: "Orange", disabled: false },
      ],
  }),
  watch: {},
  computed: {
        //   slider start
    this_facets() {
      var that = this;
      
      var facets = [];
      // if (this.$store.state[this.$store.state.Namedparent.name].books.rs.hasOwnProperty("facetsList")) {
      if (
        Object.prototype.hasOwnProperty.call(
          this.$store.state[this.$store.state.Namedparent.name].books.rs,
          "facetsList"
        )
      ) {
        var len1 = this.$store.state[this.$store.state.Namedparent.name].books
          .rs.facetsList.length;
          console.log(len1)
        var label;
        var id;
        var value;
        var count;
        for (var i = 0; i < len1; i++) {
          var facet = [];
          var len2 = this.$store.state[this.$store.state.Namedparent.name].books
            .rs.facetsList[i].facetList.length;
          for (var j = 0; j < len2; j++) {
            //纸书
            label = this.$store.state[this.$store.state.Namedparent.name].books
              .rs.facetsList[i].facetList[j].name;
            value = this.$store.state[this.$store.state.Namedparent.name].books
              .rs.facetsList[i].facetList[j].code;
            count = this.$store.state[this.$store.state.Namedparent.name].books
              .rs.facetsList[i].facetList[j].count;
            id =
              that.$store.state[that.$store.state.Namedparent.name].books.rs
                .facetsList[i].facetList[j].name;

            facet[j] = {
              id: id,
              label: label,
              value: value,
              count: count,
              name: label,
              code: value,
            };
            // 检查过滤条件中是否已经被勾选
            var filters_len = this.$store.state[
              this.$store.state.Namedparent.name
            ].books.qs.Epac.arr_fieldLists;

            for (var fi = 0; fi < filters_len; fi++) {
              if (
                this.$store.state[this.$store.state.Namedparent.name].books.rs
                  .facetsList[i].facetsList[j].id ==
                this.$store.state[this.$store.state.Namedparent.name].books.qs.Epac.arr_fieldLists[fi].id
              ) {
                if (
                  this.$store.state[
                    this.$store.state.Namedparent.name
                  ].books.qs.Epac.arr_fieldLists[fi].values.index(value)
                ) {
                  facet[j].checked = false;
                } else {
                  facet[j].checked = true;
                }
              }
            }
          }
          facets[i] = {
            facetList: facet,
            id: this.$store.state[this.$store.state.Namedparent.name].books.rs
              .facetsList[i].id,
            label: this.$store.state[this.$store.state.Namedparent.name].books
              .rs.facetsList[i].lable,
          };
        }
        that.selectvalue = [];
        // this.$store.state[
        //   this.$store.state.Namedparent.name
        // ].books.qs.filters.forEach((item) => {
        //   console.log(item);
        //   that.selectvalue.push(item.values);

        // });
        var folerts = this.$store.state[this.$store.state.Namedparent.name]
          .books.qs.Epac.arr_fieldLists;
        for (var ei = 0; ei < folerts.length; ei++) {
           that.selectvalue.push(folerts[ei].fieldValue);
          // for (var ej = 0; ej < folerts[ei].values.length; ej++) {
          //   that.selectvalue.push(folerts[ei].values[ej]);
          // }
        }
        // for(var j = 0 ; j < this.$store.state[this.$store.state.Namedparent.name].books.qs.filters.length;j++){
        //     // for(var i=0;i<this.$store.state[this.$store.state.Namedparent.name].books.qs.filters[j].values;i++){
        //     //   that.selectvalue.push(this.$store.state[this.$store.state.Namedparent.name].books.qs.filters[j].values[i]);

        //     // }
        // }
        return facets;
        // } else {
        //   console.log(
        //     "this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList.length:  is null ",
        //     this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList,
        //     this.$store.state[this.$store.state.Namedparent.name].books.rs
        //   );
        // }
      } else {
        return {};
      }
    },
    // slider end
  },
  methods: {
     //   slider satrt  判断slider是否有数据
    isShowFacetList: function (facetList) {
      return facetList.length > 0;
    },
    ChangeFilterV2: function (e) {
      console.log("ChangeFilterV2: ", e);
    },
    // 修改左边侧边栏
    ChangeFilter: function (lable,fieldclassName, id, code, name, do_search_book) {
      console.log(lable,fieldclassName, id, code, name, do_search_book)
      this.$store.commit(
        this.$store.state.Namedparent.name + "/SHOW_DETAIL",
        false
      );
      this.$store.commit(
        this.$store.state.Namedparent.name + "/Changeloading",
        true
      );
      return new Promise(() => {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/ChangeCurrentPageWithOutSync",
          1
        );
        this.$store.commit(
          this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
          {
            fieldName: fieldclassName,
            value: name,
            fieldNametxt:code,
            lable:lable
          },
          do_search_book
        );
      });
      //   console.log("addFilters:", this.$store.state[this.$store.state.Namedparent.name].books.qs.filters);
    },
    // slider end
  },
  mounted() {
    this.this_state = this.state;
  },
};
</script>

<style scoped>
/deep/.sliderhead .ant-collapse-header{
  color: #fff  !important;
}
/* /deep/.sliderhead .ant-collapse-arrow{
  right: 15px;
  left: 0 !important;
} */
/deep/.ant-collapse-item:last-child > .ant-collapse-content{
  border-radius: 0;
}
/deep/.ant-form-item{
  margin-bottom: 0;
}
/deep/.ant-collapse{
  border-radius: 0;
  border-bottom: 1px solid #d9d9d9;
}
/deep/.ant-collapse > .ant-collapse-item{
  border-bottom: none;
}
/deep/.ant-checkbox-group{
  margin-bottom: 15px;
}
</style>